<!DOCTYPE html>
<!-- saved from url=(0058)https://blog.ygowill.net/assets/html/ray-tracing-demo.html -->
<html lang="zh"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>WebGL Path TracingP 是快进,O 是还原</title>
    <style type="text/css">
        body {
            max-width: 900px;
            padding: 30px;
            margin: 0 auto;
            font: 14px/19px 'Lucida Grande', sans-serif;
        }

        #main {
            margin: 80px 0;
            padding-left: 542px;
            height: 512px;
            position: relative;
        }

        #error {
            position: absolute;
            left: 0;
            top: 0;
            width: 412px;
            height: 412px;
            padding: 50px;
            text-align: center;
            background: #DFDFDF;
        }

        canvas {
            position: absolute;
            left: 0;
            top: 0;
        }

        p,
        ul {
            margin: 0 0 30px 0;
        }

        h1 {
            text-align: center;
        }

        a {
            color: inherit;
        }

        #footer {
            margin: 100px 0 0 0;
            font-size: 18px;
        }

        #glossiness-factor {
            display: none;
            font-size: 12px;
        }

        #glossiness-factor input {
            width: 40px;
            text-align: center;
        }
    </style>
    <script type="text/javascript" src="./WebGL Path TracingP 是快进,O 是还原_files/glsl.js"></script>
    <script type="text/javascript" src="./WebGL Path TracingP 是快进,O 是还原_files/sylvester.src.js"></script>
    <script type="text/javascript" src="./WebGL Path TracingP 是快进,O 是还原_files/vector_func.js"></script>
    <script type="text/javascript" src="./WebGL Path TracingP 是快进,O 是还原_files/variables.js"></script>
    <script type="text/javascript" src="./WebGL Path TracingP 是快进,O 是还原_files/glUtils.js"></script>
    <script type="text/javascript" src="./WebGL Path TracingP 是快进,O 是还原_files/webgl-path-tracing.js"></script>
    <script type="text/javascript" src="./WebGL Path TracingP 是快进,O 是还原_files/Cube.js"></script>
    <script type="text/javascript" src="./WebGL Path TracingP 是快进,O 是还原_files/Sphere.js"></script>
    <script type="text/javascript" src="./WebGL Path TracingP 是快进,O 是还原_files/Light.js"></script>
    <script type="text/javascript" src="./WebGL Path TracingP 是快进,O 是还原_files/Shader.js"></script>
    <script type="text/javascript" src="./WebGL Path TracingP 是快进,O 是还原_files/PathTracer.js"></script>
    <script type="text/javascript" src="./WebGL Path TracingP 是快进,O 是还原_files/Renderer.js"></script>
    <script type="text/javascript" src="./WebGL Path TracingP 是快进,O 是还原_files/UI.js"></script>
</head>

<body>
    <h1>WebGL 路径追踪</h1>

    <p>该项目是基于WebGL和路径追踪的一个光线追踪小demo，参考项目见页面底部链接</p>

    <ul>
        <li>点击物体选中，可拖拽移动，点击空白处取消物体选中</li>
        <li>按Backspace删除</li>
        <li>拖拽鼠标移动视角</li>
        <li>选中光源后可移动光源</li>
    </ul>

    <div id="main">
        <canvas id="canvas" width="512" height="512"></canvas>
        <div id="error" style="z-index: -1;">Loading...</div>

        <p>
            <button onclick="ui.selectLight()">选中光源</button>
        </p>

        <p>
            <b>材质:</b>
            <select id="material">
                <option value="0" selected="">漫反射</option>
                <option value="1">镜面</option>
                <option value="2">光泽</option>
            </select>
            <span id="glossiness-factor" style="display: none;">
                <br>光泽度因子: 0 &lt; <input id="glossiness" value="0.5"> &lt; 1
            </span>
            <br>

            <b>环境:</b>
            <select id="environment">
                <option value="0" selected="">Cornell Box - Red and Green</option>
                <option value="1">Cornell Box - Yellow and Blue</option>
                <option value="2">Cornell Box - Red and Blue</option>
            </select>
        </p>
    </div>

    <p id="footer">Refrences:
        </p><li>
            <a href="https://oktomus.com/posts/2020/ray-tracer-with-webgl-compute/">Writing a ray tracer for the web</a>
        </li>
        <li>
            <a href="https://reindernijhoff.net/2019/03/wolfenstein-raytracing-on-using-webgl1/">Wolfenstein: Ray
                Tracing On
                using WebGL1</a>
        </li>
        <li>
            <a href="https://github.com/evanw/webgl-path-tracing">Evan Wallace/webgl-path-tracing</a>
        </li>
        <li>
            <a href="http://raytracey.blogspot.com/2019/06/lighttracer-first-webgl-path-tracer-for.html">LightTracer,
                the first
                WebGL path tracer for photorealistic rendering of complex scenes in the browser</a>
        </li>
        <li>
            <a href="https://github.com/hoxxep/webgl-ray-tracing-demo">hoxxep/webgl-ray-tracing-demo</a>
        </li>
        <li>
            <a href="https://github.com/sschoenholz/WebGL-Raytracer">sschoenholz/WebGL-Raytracer</a>
        </li>


</body></html>